<template>
	<view class="loginLayout">
		<view class="loginbox">
			<view class="header">
				<img src="@/static/images/cheems.png" class="logo" alt="" />
			</view>
			<view class="body">
				<view class="input">
					<view class="login" v-if="isLogin">
						<view class="uni-form-item uni-column">
						 <input class="uni-input"  placeholder="登录账号" @focus="onFocus" @blur="onBlur" v-model="loginParams.username"/>
						</view>
						<image src="@/static/images/chicken.gif" mode="" class="pic" :class="isActive?'active':''"></image>
						<view class="uni-form-item uni-column">
						 <input class="uni-input"  placeholder="登录密码" :password="showPassword" v-model="loginParams.password"/>
						</view>
						<view class="text">
							<view @click="toEnroll()">没有账号?点我注册</view>
						</view>
						<view class="button">
								<button class="mini-btn"plain="true" size="large" @click="login">登录</button>
						</view>
					</view>
					
					<view class="enroll" v-else>
						<view class="uni-form-item uni-column">
						 <input class="uni-input"  placeholder="注册账号" @focus="onFocus" @blur="onBlur" v-model="enrollParams.username"/>
						</view>
						<image src="@/static/images/chicken.gif" mode="" class="pic" :class="isActive?'active':''"></image>
						<view class="uni-form-item uni-column">
						 <input class="uni-input"  placeholder="注册密码" v-model="enrollParams.password"/>
						</view>
						<view class="uni-form-item uni-column">
						 <input class="uni-input"  placeholder="再次输入密码" v-model="enrollParams.password"/>
						</view>
						<view class="text">
							<view @click="toEnroll()">返回登录</view>
						</view>
						<view class="button">
							<button class="mini-btn" plain="true" size="large" @click="enroll">注册</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="foot">
			<view class="footText">
				点击登录即同意<隐私条款>
			</view>
		</view>
	</view>
</template>

<script setup>
import {ref} from 'vue';
import { apienroll , apilogin} from '../../api/api';
const isLogin = ref(true)
const showPassword = ref(true)

//输入动画
const isActive = ref(false);
const onFocus =()=>{
	isActive.value=true;
}
const onBlur =()=>{
	isActive.value=false;
}
const toEnroll = ()=>{
	isLogin.value = !isLogin.value;
}
const changePassword = ()=>{
    showPassword = !showPassword;
}

//请求体
const enrollParams = {
	"username":"",
	"password":""
}

const loginParams = {
	"username":"",
	"password":""
}
//注册事件
const enroll = async()=>{
	const res = await apienroll(enrollParams);
	console.log(res);
	if(enrollParams.username==""||enrollParams.password==""){
		uni.showToast({
			title:"请输入账号密码",
			icon:"error"
		})
		return
	}
	if(res.code==1){
		uni.showToast({
			title:"注册成功"
		})
		isLogin.value = true;
	}
}
//登录事件
const login = async()=>{
	const res = await apilogin(loginParams);
	//登录成功
	if(res.code==1){
		uni.showToast({
			title:"登陆成功"
		})
		uni.setStorageSync("token",res.data.token)
		uni.setStorageSync("avator",res.data.avator)
		uni.switchTab({
			url:"/pages/index/index"
		})
	}
}
</script>

<style lang="scss" scoped>
.loginLayout{
	height: 80vh;
	background:
	linear-gradient(to bottom,transparent,#fff 1200rpx),
	linear-gradient(to right,#9795f0 2%,#fbc8d4);
	display: flex;
	align-items: center;
	justify-content: center;
	.loginbox{
		border-radius: 20rpx;
		height: 1100rpx;
		width: 650rpx;
		overflow: hidden;
		.header{
			width: 100%;
			height: 400rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.logo{
				width: 220rpx;
				height: 220rpx;
				border-radius: 20rpx;
			}
		}
		.body{
			width: 100%;
			height: 700rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.input{
				.login{
					.uni-input{
					  box-shadow:3rpx 12rpx 18rpx 0rpx rgba(48, 55, 66, 0.15);
					  min-height:115rpx;
					  min-width: 630rpx;
					  border-radius: 20rpx;
					  margin-bottom: 30rpx;
					}
					.pic{
						width: 100rpx;
						height: 100rpx;
						z-index: 1;
						position: absolute;
						top: 630rpx;
						left: calc(50% - 50rpx);
						opacity: 0;
						transition: top 0.6s;
					}
					.pic.active{
						top: 530rpx;
						opacity: 1;
					}
					.button{
						margin-top: 20rpx;
					}
				}
				.enroll
				    .uni-input{
				      box-shadow:3rpx 12rpx 18rpx 0rpx rgba(48, 55, 66, 0.15);
				      min-height:115rpx;
				      min-width: 630rpx;
				      border-radius: 20rpx;
				      margin-bottom: 30rpx;
				    }
					.pic{
						width: 100rpx;
						height: 100rpx;
						z-index: 1;
						position: absolute;
						top: 560rpx;
						left: calc(50% - 50rpx);
						opacity: 0;
						transition: top 0.6s;
					}
					.pic.active{
						top: 460rpx;
						opacity: 1;
					}
					.button{
						margin-top: 20rpx;
					}
					.text{
						color: $text-font-color-1;
					}
			}
		}
	}
	.foot{
		display: flex;
		align-items: center;
		position: absolute;
		bottom: 50rpx;
		.footText{
			color: $text-font-color-1;
		}
	}
}
</style>
